<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
      </van-nav-bar>
    </div>
    <div class="topimage-div">
      <img :src="goodsInfo.IMAGE1" alt="">
    </div>
    <div class="goods-name">{{goodsInfo.NAME}}</div>
    <div class="goods-price">￥{{goodsInfo.PRESENT_PRICE | toMoney}}</div>
    <div>
      <!-- swipeable 左右切换 -->
      <!-- sticky 吸顶效果 -->
      <van-tabs swipeable sticky>
        <van-tab title="商品详情">
          <div class="detail" v-html="goodsInfo.DETAIL">
          </div>
        </van-tab>
        <van-tab title="评论">
          qqqq
          <br><br><br>
        </van-tab>
      </van-tabs>
    </div>
    <div class="button-group">
      <div>
        <van-button size="large" type="primary" @click="addGoodsToCart">加入购物车</van-button>
      </div>
      <div>
        <van-button size="large" type="danger">购买</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import url from '@/serviceAPI.config.js'
import { Toast } from 'vant'
import {toMoney} from '@/filter/moneyFilter'
  export default {
    data() {
      return {
        goodsId: '',
        goodsInfo:{} //商品详细信息
      }
    },
    created(){
      // console.log(this.$route.query)
      this.goodsId = this.$route.query.goodsId ? this.$route.query.goodsId :this.$route.params.goodsId
      // console.log(this.goodsId)
      this.getInfo()
    },
    filters:{
      toMoney(money){
        return toMoney(money)
      }
    },
    methods:{
      getInfo(){
        axios({
          url:url.getDateilGoodsInfo,
          method:'post',
          data:{goodsId:this.goodsId}
        }).then(Response=>{
          if(Response.data.code == 200 && Response.data.message){
            this.goodsInfo = Response.data.message
            console.log(this.goodsInfo)
          }else{
            Toast('服务器错误，数据获取失败')
          }
          // console.log(Response)
        }).catch(error=>{
          console.log(error)
        })
      },
      onClickLeft(){
        window.history.go(-1)
      },
      //增加商品到购物车
      addGoodsToCart(){
        //取出本地购物车中的商品
        let cartInfo = localStorage.cartInfo ? JSON.parse(localStorage.cartInfo):[]
        let isHaveGoods = cartInfo.find(cart=>cart.goodsId==this.goodsId)
        console.log(isHaveGoods)
        if(!isHaveGoods){
          let newGoodsInfo = {
            goodsId:this.goodsInfo.ID,
            Name:this.goodsInfo.NAME,
            price:this.goodsInfo.PRESENT_PRICE,
            image:this.goodsInfo.IMAGE1,
            count:1
          }
          cartInfo.push(newGoodsInfo)
          localStorage.cartInfo = JSON.stringify(cartInfo)
          Toast.success('添加成功')
        }else{
          Toast.success('已有此商品')
        }
        this.$router.push({name:'Cart'})
      },
    }
  }
</script>

<style scoped>
.topimage-div img{
  width: 100%;
}
.goods-name,.goods-price{
  background: #fff;
  text-align: center;
}
.detail{
  font-size: 0;
}
.button-group{
  position: fixed;
  bottom: 0;
  display: flex;
  background: #fff;
  width: 100%;
}
.button-group>div{
  flex: 1;
  padding: 10px;
}
</style>